<template>
  <z-container>
    <z-header height="28px">单个时间选择器自动填充</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">timePicker</z-col>
        <z-col :span="5">
          <z-time-picker v-model="value1" placeholder="选择时间" format="HH:mm:ss"></z-time-picker>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">timeSelect</z-col>
        <z-col :span="5">
          <z-time-select 
            v-model="value2" 
            :picker-options="{
              start: '08:30',
              step: '00:15',  
              end: '18:30'
            }"
            placeholder="选择时间"
          >
          </z-time-select>
        </z-col>
      </z-row>
       <z-row :gutter="12">
        <z-col :span="3">datePicker-date</z-col>
        <z-col :span="5">
          <z-date-picker v-model="value3" type="date" placeholder="选择日期"></z-date-picker>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">datePicker-datetime</z-col>
        <z-col :span="5">
          <z-date-picker v-model="value4" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd hh:mm:ss"></z-date-picker>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">datePicker-month</z-col>
        <z-col :span="5">
          <z-date-picker v-model="value5" type="month" placeholder="选择月"></z-date-picker>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">datePicker-year</z-col>
        <z-col :span="5">
          <z-date-picker v-model="value6" type="year" placeholder="选择年" format="yyyy年"></z-date-picker>
        </z-col>
      </z-row>
    </z-main>
  </z-container>

</template>
<script>
export default {
  name: 'cTimePicker',
  data() {
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      value6:''
    }
  }
}
</script>